<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <!-- 1引入 -->
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">

            <!-- 7映射组件的展示区域 -->
            <router-view></router-view>
        </div>
        <script>
            // 2创建组件
            var Sister = Vue.component('sister',{
                template : '<h2>这是首页</h2>'
            });
            var Borther = Vue.component('borther',{
                template : '<h3>这是第二页</h3>'
            });
            // 3创建路由对象
            var router = new VueRouter({
                // 4创建路由配置
                routes : [
                    // 5配置具体的路由
                    {
                        name : 'haha',
                        path : '/index',
                        component : Sister,
                    },
                    {
                        name : 'hehe',
                        path : '/admin',
                        component : Borther,
                    }
                ]
            })
            var vm = new Vue({
                el: '#app',
                // 6注入路由
                router,
                data: {

                }
            })
        </script>
    </body>
</html>